<!--
 * @Description: 添加/编辑视点
 * @Autor: 韩怡婷
 * @Date: 2021-12-28 10:07:45
 * @LastEditors: 韩怡婷 448520341@qq.com
 * @LastEditTime: 2022-06-15 14:32:41
-->
<template>
  <ag-popup
    class="addView-panel"
    :title="
      this.addViewPointPopup == 'add' ? '添加当前视图窗口' : '编辑当前视图窗口'
    "
    v-model="visible"
    @onConfirm="confirm"
    @onCancel="onCancel"
    :confirmVal="'确认'"
    :cancelVal="'取消'"
    :confirm="true"
    :cancel="true"
    :mask="false"
  >
    <el-form label-width="80px">
      <el-form-item label="视点名称">
        <el-input
          size="small"
          v-model="viewPointName"
          placeholder="请输入视点名称"
        />
      </el-form-item>
      <el-form-item label="视点分组">
        <el-select
          size="small"
          v-model="nowGroupId"
          placeholder="请选择视点所在的分组"
        >
          <el-option
            v-for="item in getOtherGroup"
            :key="item.imageStoreDirId"
            :label="item.imageStoreDirName"
            :value="item.imageStoreDirId"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label-width="0px">
        <div class="switch-control">
          <span class="switch-label">是否为默认视点</span>
          <el-switch v-model="initialSpot"> </el-switch>
        </div>
        <div class="switch-control">
          <span class="switch-label">开启跳转动画</span>
          <el-switch v-model="jumpSpotEnable"> </el-switch>
        </div>
      </el-form-item>
      <el-form-item
        label="当前视图"
        :label-col="{ span: 6 }"
        v-if="this.addViewPointPopup == 'edit'"
      >
        <div class="editImg">
          <div class="editFormPlace" :wrapper-col="{ span: 8 }">
            <img :src="imgUrl" />
            <el-button size="small" type="primary" ghost @click="editNewPlace()"
              >更新位置</el-button
            >
          </div>
        </div>
      </el-form-item>
    </el-form>
  </ag-popup>
</template>
<script>
import imageDataApi from "@/views/js/api/imageDataApi";
import canvas2Image from "../js/canvas2Image";
import AgPopup from "@/views/components/precut/AgPopup.vue";
export default {
  name: "addOrEditViewPoint",
  components: {
    "ag-popup": AgPopup,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    list: {
      type: Array,
      default() {
        return [];
      },
    },
    nowViewPoint: {
      type: Object,
      default: () => {},
    },
    addViewPointPopup: {
      type: String,
      default: "",
    },
    nowSelectGroupId: {
      type: String,
      default: undefined,
    },
    //下拉列表的自建分组
    getOtherGroup: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      newViewPoint: Object.assign({}, this.nowViewPoint), //复制一份的传入的视点信息
      visible_AddAction: false, //是否显示添加附加功能
      nowGroupId: undefined, //当前组id
      actionList: [], //动作列表
      editingAction: undefined,
      position: "",
      heading: "",
      pitch: "",
      roll: "",
      tag: "",
      userId: "",
      viewPointName: "",
      imgUrl: "",
      initialSpot: false, //修改视点 ：是否为默认视点
      jumpSpotEnable: true, //是否开启跳转动画
    };
  },
  watch: {
    nowSelectGroupId(nv) {
      if (nv) {
        if (nv == "全部") {
          this.nowGroupId = undefined;
        } else {
          this.nowGroupId = nv;
        }
      }
    },
    nowViewPoint: {
      handler: function (nv, ov) {
        if (nv) {
          this.newViewPoint = Object.assign({}, nv);
          this.initialSpot = this.newViewPoint.initialSpot ? true : false; //默认视点
          this.jumpSpotEnable = this.newViewPoint.jumpSpotEnable ? true : false;
          this.nowGroupId = this.newViewPoint.imageStoreDirId;
          this.imgUrl = this.newViewPoint.imageStoreCode;
          this.position = this.newViewPoint.json.position;
          this.heading = this.newViewPoint.json.heading;
          this.pitch = this.newViewPoint.json.pitch;
          this.roll = this.newViewPoint.json.roll;
          this.userId = this.newViewPoint.createUserId;
          this.viewPointName = this.newViewPoint.imageStoreName;
        } else {
          this.viewPointName = "";
          this.nowGroupId = this.nowSelectGroupId;
          this.initialSpot = false;
        }
      },
      immediate: true,
    },
    editingAction(nv) {
      if (nv) {
        //要编辑某个动作，则打开
        this.visible_AddAction = true;
      }
    },
    list(nv){
      if (nv.lenght === 0){
        this.nowGroupId = undefined;
      }
    }
  },
  methods: {
    /**
     * @lastUpdateBy : 韩怡婷
     * @description: 添加视点
     */
    addViewPoint() {
      let _this = this;
      let genimg = canvas2Image.capturePng(CIM.viewer, 300, null, 0.8);
      let json = agcim.camera.camera.getCameraAsJSON(CIM.viewer);
      json.layerId = CIM.layerTree._aglayerIds;
      //添加时间
      json.time = Cesium.JulianDate.toDate(CIM.viewer.clock.currentTime);
      // 添加视点
      imageDataApi
        .saveImageStore({
          imageStoreName: this.viewPointName,
          imageStoreDirId: this.nowGroupId,
          imageStoreInformation: JSON.stringify(json),
          jumpSpotEnable: this.jumpSpotEnable,
          initialSpot: this.initialSpot,
          imageStoreCode: genimg.src,
        })
        .then(() => {
          _this.$message({
            message: "添加视点成功!",
            type: "success",
          });
          _this.$emit("close");
          _this.$emit("updateList");
          _this.viewPointName = "";
        });
    },
    /**
     * @lastUpdateBy : 韩怡婷
     * @description: 编辑视点--保存
     */
    async editViewPoint() {
      let _this = this;
      _this.newViewPoint.json.layerId = CIM.layerTree._aglayerIds;
      let json = Object.assign({}, this.newViewPoint.json, {
        position: _this.position,
        heading: _this.heading,
        pitch: _this.pitch,
        roll: _this.roll,
      });
      // 编辑视点
      imageDataApi
        .updateImageStore({
          imageStoreId: _this.newViewPoint.imageStoreId,
          imageStoreName: _this.viewPointName,
          imageStoreInformation: JSON.stringify(json),
          imageStoreDirId: _this.nowGroupId,
          jumpSpotEnable: _this.jumpSpotEnable,
          initialSpot: _this.initialSpot,
          imageStoreCode: _this.imgUrl,
        })
        .then(() => {
          _this.$message({
            message: "更新视点成功!",
            type: "success",
          });
          _this.$emit("close");
          _this.$emit("updateList");
        });
    },
    // 点击更新位置按钮操作
    editNewPlace() {
      let genimgNew = canvas2Image.capturePng(CIM.viewer, 300, null, 0.8);
      this.imgUrl = genimgNew.src;
      this.position = CIM.viewer.camera.positionWC.clone();
      this.heading = CIM.viewer.camera.heading;
      this.pitch = CIM.viewer.camera.pitch;
      this.roll = CIM.viewer.camera.roll;
    },
    onCancel() {
      if (this.addViewPointPopup == "add") {
        this.viewPointName = "";
        this.initialSpot = false;
      } else {
        this.viewPointName = this.newViewPoint.imageStoreName;
      }
      this.$emit("close");
    },
    /**
     * @lastUpdateBy : 韩怡婷
     * @description: 点了确定，要先判断有无默认视点再添加
     */
    confirm() {
      if (!this.nowGroupId) {
        this.$message({
          message: "请选择组!",
          type: "warning",
        });
        return;
      }
      if (!this.viewPointName || this.viewPointName.replace(/ /g, "") == "") {
        this.$message({
          message: "视点名称不能为空!",
          type: "warning",
        });
        return;
      }
      //判断是不是默认视点
      if (this.initialSpot) {
        //是默认视点，那么要检查原来是不是有默认视点，有的话要提示
        this.$confirm(
          "用户仅可设置一个默认视点，若已有默认视点，本次操作将覆盖原有默认视点。是否确认？",
          "提示",
          {
            conformButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(() => {
            if (this.addViewPointPopup == "add") {
              this.addViewPoint();
            } else if (this.addViewPointPopup == "edit") {
              this.editViewPoint();
            }
          })
          .catch(() => {});
      } else {
        //不是默认视点
        if (this.addViewPointPopup == "add") {
          this.addViewPoint();
        } else if (this.addViewPointPopup == "edit") {
          this.editViewPoint();
        }
      }
    },
    /**
     * @lastUpdateBy : 张瀚
     * @description: 编辑动作
     * @param {*} action
     */
    editAction(action) {
      Object.assign(this.editingAction, action);
      this.editingAction = undefined;
    },
  },
};
</script>
<style scoped>
.editImg {
  width: 100%;
  height: 100px;
}

.editFormPlace {
  width: 150px;
  height: 94px;
  border: none;
  float: left;
  position: relative;
}
.editFormPlace img {
  width: 100%;
  height: 100%;
  border-radius: 4px;
}
.editFormPlace button {
  position: absolute;
  right: -93px;
  bottom: 0;
}

.editNewPlace {
  margin-top: 65px;
  float: right;
}

.additionalAll {
  margin-left: 117px;
  width: 67%;
  height: 100px;
  border: 1px solid #ccc;
  position: relative;
  margin-top: 8px;
}

.additionalTitle {
  height: 30px;
  border-bottom: 1px solid #ccc;
}

.addtionalFunc {
  position: absolute;
  left: 88%;
  top: 50%;
  transform: translate(0, -50%);
}

.addtionalFunc button {
  height: 30px;
  width: 30px;
  padding: 0;
}

.addf-box {
  height: 100px;
  overflow: auto;
  padding-left: 10px;
  padding-right: 30px;
}

.addf-box li {
  list-style: none;
}

.addf-box .icon {
  padding: 5px;
}
/* 新增 */
.addView-panel {
  width: 400px;
  top: -12px;
  left: -700px;
  right: 0;
  position: absolute;
}
.addView-panel .el-form {
  padding: 20px 20px 0;
}
.addView-panel::v-deep .el-form-item {
  margin-bottom: 8px;
}
.addView-panel::v-deep .el-form-item__label {
  color: #fff;
}
.el-select {
  width: 280px;
}
.switch-control {
  display: inline-block;
}
.switch-control .switch-label {
  padding: 0 18px;
  display: inline-block;
}
</style>
